<template>
  <view class="cart">
    <!-- 获取地址 -->
    <view class="cart-site">
      <view v-if="address">
        <view class="cart-top">
          <view>
            {{ address.userName }}
          </view>
          <view>{{ address.telNumber }}</view>
        </view>
        <view class="cart-bom"
          >{{ address.provinceName }}{{ address.cityName
          }}{{ address.countyName }}{{ address.detailInfo }}
        </view>
      </view>
      <view class="cart-site" v-else>
        <button @click="chooseAddress">获取收货地址</button>
      </view>
    </view>

    <view class="cart-text">购物车</view>

    <!-- 购物车内容 -->
    <view class="cart-data">
      <view
        class="cart-goods"
        v-for="(item, index) in carts"
        :key="item.goods_id"
      >
        <!-- 单复选框 -->
        <checkbox-group @change="changeOne(index)" :checked="item.checked">
          <checkbox :checked="item.checked"></checkbox>
        </checkbox-group>
        <!-- 图片 -->
        <view class="cart-goods-img">
          <image mode="widthFix" :src="item.goods_small_logo"></image>
        </view>
        <!-- 内容 -->
        <view class="cart-goods-content">
          <view class="cart-goods-title">{{ item.goods_name }} </view>
          <view class="cart-goods-info">
            <view class="cart-goods-price">￥{{ item.goods_price }}</view>
            <view class="cart-goods-num">
              <view class="cart-goods-update" @click="updateNum(-1, index)"
                >-</view
              >
              <view class="cart-goods-sum">{{ item.count }}</view>
              <view class="cart-goods-update" @click="updateNum(1, index)"
                >+</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 结算 -->
    <view class="cart-price-tool">
      <!--  全选复选框 -->
      <checkbox-group @change="changeSum">
        <checkbox :checked="judge">全选</checkbox>
      </checkbox-group>

      <view class="cart-Prices">
        <view class="cart-price">
          <view>合计:</view>
          <view class="price">￥{{ sumPrice }}</view>
        </view>
        <view class="freight">包含运费</view>
      </view>
      <view class="cart-clearing" @click="goPay">结算({{ clearing }})</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      carts: [],
      judge: "",
      address: "",
    };
  },
  // 1.1页面加载只触发一次,重新返回没有触发,每次需要关闭购物车这个页面才进来才行

  // onLoad() {
  //   this.carts = uni.getStorageSync("carts") || [];
  // },

  // 方法1:将onLoad换成onShow(页面显示)就可以解决了
  // 方法2:关闭购物车这个页面才进来才行
  onShow() {
    this.carts = uni.getStorageSync("carts") || [];
    if (this.carts.length) {
      this.judge = this.carts.every((v) => v.checked == true);
    }
    this.address = uni.getStorageSync("address");
  },

  computed: {
    // 结算总数
    clearing() {
      return this.carts.filter((v) => v.checked).length;
    },

    // 总价
    sumPrice() {
      let price = 0;
      this.carts.forEach((v) => {
        if (v.checked) {
          price += v.goods_price * v.count;
        }
      });
      return price;
    },
  },
  watch: {
    carts: {
      deep: true,
      handler(newCarts) {
        uni.setStorageSync("carts", newCarts);
      },
    },
  },
  methods: {
    // 获取地址
    chooseAddress() {
      wx.chooseAddress({
        complete: (res) => {
          this.address = res;
          uni.setStorageSync("address", res);
        },
      });
    },

    // 购物车单复选框
    changeOne(index) {
      this.carts[index].checked = !this.carts[index].checked;
      this.judge = this.carts.every((v) => v.checked == true);
    },

    //购物车总复选框
    changeSum() {
      this.judge = !this.judge;
      this.carts.forEach((cart) => (cart.checked = this.judge));
    },

    // 商品数量调整
    updateNum(num, index) {
      if (num == -1 && this.carts[index].count == 1) {
        wx.showModal({
          title: "温馨提示....",
          content: "确认要删除该商品吗?",
          success: (res) => {
            // 箭头函数才行,不然this指向undefun
            if (res.confirm) {
              this.carts.splice(index, 1);
            } else if (res.cancel) {
              this.carts[index].count++;
            }
          },
        });
      }
      this.carts[index].count += num;
    },

    //  结算跳转到支付页面
    goPay() {
      if (this.clearing && this.address) {
        wx.navigateTo({
          url: "/pages/pay/index",
        });
      } else {
        wx.showToast({
          title: "您还没有选中商品或者收货地址",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.cart {
  .cart-site {
    padding: 20rpx;
    color: #000;
    font-weight: 600;
    button {
      color: $theme-color;
      font-size: 30rpx;
      border: 1rpx solid $theme-color;
    }

    .cart-top {
      display: flex;
      justify-content: space-between;
    }

    .cart-bom {
    }
  }

  .cart-text {
    font-size: 34rpx;
    font-weight: 700;
    padding: 20rpx 10rpx;
    color: $theme-color;
    border-top: 3rpx solid $theme-color;
    border-bottom: 3rpx solid $theme-color;
  }
  .cart-data {
    margin-bottom: 100rpx;
  }
  .cart-goods {
    display: flex;
    align-items: center;
    border-top: 1rpx solid #eee;
    padding: 20rpx;

    checkbox-group {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      checkbox {
        font-size: 10rpx;
      }
    }
    .cart-goods-img {
      flex: 2;
    }
    .cart-goods-content {
      padding: 15rpx;
      flex: 4;

      .cart-goods-title {
        color: #666;
        @include ellipsis(2);
      }

      .cart-goods-info {
        display: flex;
        height: 100rpx;
        align-items: center;

        .cart-goods-price {
          flex: 1;
          color: $theme-color;
        }
        .cart-goods-num {
          display: flex;
          align-items: center;
          .cart-goods-sum {
            margin: 0 10rpx;
          }
          .cart-goods-update {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ddd;
            width: 50rpx;
            height: 50rpx;
          }
        }
      }
    }
  }
  .cart-price-tool {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1rpx solid #eee;
    display: flex;
    align-items: center;
    height: 80rpx;
    checkbox-group {
      flex: 1;
      padding: 10rpx;
    }
    .cart-Prices {
      padding: 0 20rpx;

      .cart-price {
        display: flex;
        align-items: center;
        .price {
          margin-left: 10rpx;
          font-size: 30rpx;
          font-weight: 700;
          color: $theme-color;
        }
      }
      .freight {
        display: flex;
        justify-content: flex-end;
      }
    }
    .cart-clearing {
      display: flex;
      height: 100%;
      padding: 10rpx 60rpx;
      color: #fff;
      justify-content: center;
      align-items: center;
      background-color: $theme-color;
    }
  }
}
</style>
